<template>
	<view class="home app-pages">
		<view class="header">
			<view class="seacth">
				<u-search inputAlign="left" :inputStyle="{height:'60rpx'}" v-model="content"></u-search>
			</view>

			<view class="cell">
				<view class="cell-item">
					<view class="title">推荐店铺</view>
					<view class="list">
						<view class="list-item" v-for="item in 4" :key="item">
							<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
								width="320rpx" height="200rpx" />
							<view class="text">复兴路办公区水吧</view>
						</view>
					</view>
				</view>

				<view class="cell-item">
					<view class="title">推荐商品</view>
					<view class="list">
						<view class="list-item" v-for="item in 6" :key="item">
							<u--image radius="4" :showLoading="true"
								src="https://cdn.uviewui.com/uview/swiper/swiper1.png" width="320rpx" height="200rpx" />
							<view class="text">
								<view class="">复兴路办公区水吧</view>
								<view class="tips">
									<view class="price"> <text style="font-size: 24rpx;">￥</text> 1800</view>
									<view class="sales-volume">100销量</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				content: ''
			}
		},
		onShow() {
			if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
				this.$scope.getTabBar().setData({
					selected: 1
				})
			};
		},
		methods: {
			handleRouter(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.home {
		.cell {
			padding-bottom: 100rpx;

			.cell-item {
				margin-top: 30rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.list {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.list-item {
						margin-top: 20rpx;

						.text {
							margin: 10rpx;

							.tips {
								display: flex;
								justify-content: space-between;
								align-items: flex-end;
								margin-top: 6rpx;

								.price {
									color: red;
								}

								.sales-volume {
									font-size: 24rpx;
									color: #333333;
								}
							}
						}
					}
				}
			}
		}

		.seacth {
			margin: 20rpx 0;
		}
	}
</style>
